<template>
	<view>
		<view style="padding: 40rpx;background-color: #dedede;margin: 20rpx;border-radius: 20rpx;">
			<u-row customStyle="margin-bottom: 10px">
			    <u-col span="9">
			        <view>铃声通知</view>
			    </u-col>
			    <u-col span="3">
			        <u-switch v-model="systemConfig.bell" activeColor="#5AC725" asyncChange @change="asyncChange(0, systemConfig.bell)" ></u-switch>
			    </u-col>
			</u-row>
			
			<u-row customStyle="margin-bottom: 10px;margin-top:40rpx;">
			    <u-col span="9">
			        <view>震动通知(仅APP有效)</view>
			    </u-col>
			    <u-col span="3">
			        <u-switch v-model="systemConfig.vibrate" activeColor="#5AC725" asyncChange @change="asyncChange(1,systemConfig.vibrate)" ></u-switch>
			    </u-col>
			</u-row>
		</view>
		<view style="padding: 40rpx;background-color: #dedede;margin: 20rpx;border-radius: 20rpx;margin-top:40rpx;">
			<u-row customStyle="margin-bottom: 10px">
			   <u-button @tap="modalShow = true" type="error" size="normal" text="退出登录"></u-button>
			</u-row>
		</view>

		<u-modal
			:content="'确认退出登录'"
			:show="modalShow"
			showCancelButton
			closeOnClickOverlay
			@confirm="confirm"
			@cancel="modalShow = false"
			@close="modalShow = false"
		></u-modal>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	import $store from '@/store/index.js';
	export default {
		data() {
			return {
				modalShow: false
			};
		},
		computed:{
			...mapGetters(['systemConfig'])
		},
		created() {
			//console.log(this.systemConfig)
		},
		methods: {
			confirm(){
				console.log('用户退出登录，已清除用户信息')
				uni.closeSocket();
				uni.clearStorageSync('TOKEN');
				uni.clearStorageSync('LOGIN_USER_INFO')
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			asyncChange(i, flag) {
				switch(i){
					case 0:
					$store.state.systemConfig.bell = !flag;break;
					case 1:
					$store.state.systemConfig.vibrate = !flag;break;
				}
				uni.setStorageSync('SYSTEM_CONFIG',this.systemConfig);
			}
		}
	};
</script>

<style>

</style>
